<template>
  <div class="container-box">
    <el-tabs tab-position="left" ref="activeTab" v-model="activeName" @tab-click="handleClick" class="activeName">
<!--      <el-tab-pane v-if="userType == '1'" label="单次体验" name="zero" class="my-tabs">-->
<!--        <singlePay v-if="activeName == 'zero'" @reload="reload($event)" />-->
<!--      </el-tab-pane>-->
      <el-tab-pane name="first" class="my-tabs">
        <span slot="label"><i class="el-icon-my-mine-user"></i> 我的资料</span>
        <dataInfo @jumpPage="jumpPage($event)" @reloadUser="reloadUser" v-if="activeName == 'first'" />
      </el-tab-pane>
      <el-tab-pane name="second" class="my-tabs">
        <span slot="label"><i class="el-icon-my-mine-vip"></i> 会员中心</span>
        <vip v-if="activeName == 'second'" @reloadUser="reloadUser" @reload="reload($event)" />
      </el-tab-pane>
      <el-tab-pane name="fifth" class="my-tabs">
        <span slot="label"><i class="el-icon-my-mine-order"></i> 我的订单</span>
        <order v-if="activeName == 'fifth'" @reloadUser="reloadUser" @reload="reload($event)" />
      </el-tab-pane>
      <el-tab-pane name="four" class="my-tabs">
        <span slot="label"><i class="el-icon-my-mine-mailbox"></i> 邮箱信息</span>
        <mail v-if="activeName == 'four'" />
      </el-tab-pane>
      <el-tab-pane name="third" class="my-tabs">
        <span slot="label"><i class="el-icon-my-mine-account"></i> 账户安全</span>
        <account v-if="activeName == 'third'" @reload="reload($event)" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import singlePay from "./singlePay";
  import vip from "./vip";
  import dataInfo from "./dataInfo";
  import account from "./account";
  import mail from "./mail";
  import order from "./order";

  export default {
    components: {vip,dataInfo,account,singlePay,mail,order},
    created() {
      //免费用开放单次购买模块
      var user = sessionStorage.getItem("user");
      user = JSON.parse(user);
      this.userType = user.userType
      // 初始打开模块
      let activeName = this.$route.params.activeName
      if (activeName != null && activeName != ''){ //指定模块
        this.activeName = activeName
      }
    },
    mounted: function () {
    },
    data() {
      return {
        userType: '',
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        // console.log(tab, event);
        // console.log(tab.name)
        //不是使用下面的也可以自动切换页面，该方法最要是能重置页面的滚动条
        if (this.activeName != tab.name){
          this.activeName= "";
          this.$nextTick(() => {
            this.activeName= tab.name;
          });
        }
      },
      reloadUser(){ //刷新用户头像昵称 信息
        this.$emit('reloadUser');
      },
      jumpPage(name){
        this.activeName = name
      },
      reload(e){ //子组件刷新
        if (e == 'zero-succ'){ //单次购买支付成功 未去获取发票
          this.activeName = "first"
          this.userType = '2'
        } else {
          this.activeName= "";
          this.$nextTick(() => {
            this.activeName= e;
          });
        }
      },
    }
  };
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";

@media screen and (max-width: 1200px){
  .container-box {
    .activeName::-webkit-scrollbar {display:none}
    .activeName{
      background: $globalColor;
      overflow-y: scroll;
      //左侧选择卡样式
      /deep/ .el-tabs__header.is-left{
        position: absolute;
        width: 180px;
        height: calc(100% - 173px);
        border-radius:20px 0px 0px 20px;
        box-shadow: 16px 0px 24px -3px rgba(59, 137, 226, 0.1);
        .el-tabs__nav.is-left{
          margin-top: 20px;
          /*选项卡*/
          .el-tabs__item{
            padding: 10px;
            height: 60px;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
            .el-icon-my-mine-vip{
              background: url("../../assets/img/mine-vip.png") center no-repeat;
              background-size: 18px 16px;
              width: 18px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-vip:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-user{
              background: url("../../assets/img/mine-user.png") center no-repeat;
              background-size: 16px;
              width: 16px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-user:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-mailbox{
              background: url("../../assets/img/mine-mailbox.png") center no-repeat;
              background-size: 18px;
              width: 14px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-mailbox:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-account{
              background: url("../../assets/img/mine-anquan.png") center no-repeat;
              background-size: 14px;
              width: 14px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-account:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-order{
              background: url("../../assets/img/mine-order.png") center no-repeat;
              background-size: 14px;
              width: 14px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-order:before {
              content: "替";
              visibility: hidden;
            }
          }
          /*选项卡选中样式*/
          .el-tabs__item.is-active{
            font-size: 14px;
            .el-icon-my-mine-vip{
              background: url("../../assets/img/mine-vip-on.png") center no-repeat;
              background-size: 18px 16px;
            }
            .el-icon-my-mine-user{
              background: url("../../assets/img/mine-user-on.png") center no-repeat;
              background-size: 16px;
            }
            .el-icon-my-mine-mailbox{
              background: url("../../assets/img/mine-mailbox-on.png") center no-repeat;
              background-size: 18px;
            }
            .el-icon-my-mine-account{
              background: url("../../assets/img/mine-anquan-on.png") center no-repeat;
              background-size: 14px;
            }
            .el-icon-my-mine-order{
              background: url("../../assets/img/mine-order-on.png") center no-repeat;
              background-size: 14px;
            }
          }
        }
      }
      // 右侧内容
      /deep/ .el-tabs__content{
        padding-left: 200px;
        margin-right: 15px;
        .active-content{
          background: #FFFFFF;
          margin-top: 20px;
          padding-left: 10px;
        }
      }
    }
  }
}
@media screen and (min-width: 1200px) and (max-width: 1600px){
  .container-box {
    .activeName::-webkit-scrollbar {display:none}
    .activeName{
      background: $globalColor;
      overflow-y: scroll;
      //左侧选择卡样式
      /deep/ .el-tabs__header.is-left{
        position: absolute;
        width: 180px;
        height: calc(100% - 173px);
        border-radius:20px 0px 0px 20px;
        box-shadow: 16px 0px 24px -3px rgba(59, 137, 226, 0.1);
        .el-tabs__nav.is-left{
          margin-top: 20px;
          /*选项卡*/
          .el-tabs__item{
            padding: 15px;
            height: 70px;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
            .el-icon-my-mine-vip{
              background: url("../../assets/img/mine-vip.png") center no-repeat;
              background-size: 18px 16px;
              width: 18px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-vip:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-user{
              background: url("../../assets/img/mine-user.png") center no-repeat;
              background-size: 16px;
              width: 16px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-user:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-mailbox{
              background: url("../../assets/img/mine-mailbox.png") center no-repeat;
              background-size: 18px;
              width: 14px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-mailbox:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-account{
              background: url("../../assets/img/mine-anquan.png") center no-repeat;
              background-size: 14px;
              width: 14px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-account:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-order{
              background: url("../../assets/img/mine-order.png") center no-repeat;
              background-size: 14px;
              width: 14px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-order:before {
              content: "替";
              visibility: hidden;
            }
          }
          /*选项卡选中样式*/
          .el-tabs__item.is-active{
            font-size: 14px;
            .el-icon-my-mine-vip{
              background: url("../../assets/img/mine-vip-on.png") center no-repeat;
              background-size: 18px 16px;
            }
            .el-icon-my-mine-user{
              background: url("../../assets/img/mine-user-on.png") center no-repeat;
              background-size: 16px;
            }
            .el-icon-my-mine-mailbox{
              background: url("../../assets/img/mine-mailbox-on.png") center no-repeat;
              background-size: 18px;
            }
            .el-icon-my-mine-account{
              background: url("../../assets/img/mine-anquan-on.png") center no-repeat;
              background-size: 14px;
            }
            .el-icon-my-mine-order{
              background: url("../../assets/img/mine-order-on.png") center no-repeat;
              background-size: 14px;
            }
          }
        }
      }
      // 右侧内容
      /deep/ .el-tabs__content{
        padding-left: 200px;
        margin-right: 15px;
        .active-content{
          background: #FFFFFF;
          margin-top: 30px;
          padding-left: 10px;
        }
      }
    }
  }
}
@media screen and (min-width: 1600px){
  .container-box {
    .activeName::-webkit-scrollbar {display:none}
    .activeName{
      background: $globalColor;
      overflow-y: scroll;
      //左侧选择卡样式
      /deep/ .el-tabs__header.is-left{
        position: absolute;
        width: 240px;
        height: calc(100% - 240px);
        border-radius:20px 0px 0px 20px;
        box-shadow: 16px 0px 24px -3px rgba(59, 137, 226, 0.1);
        .el-tabs__nav.is-left{
          margin-top: 40px;
          .el-tabs__item{
            padding: 30px;
            height: 100px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            .el-icon-my-mine-vip{
              background: url("../../assets/img/mine-vip.png") center no-repeat;
              background-size: 26px 24px;
              width: 22px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-vip:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-user{
              background: url("../../assets/img/mine-user.png") center no-repeat;
              background-size: 24px;
              width: 22px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-user:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-mailbox{
              background: url("../../assets/img/mine-mailbox.png") center no-repeat;
              background-size: 26px;
              width: 22px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-mailbox:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-account{
              background: url("../../assets/img/mine-anquan.png") center no-repeat;
              background-size: 22px;
              width: 22px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-account:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-mine-order{
              background: url("../../assets/img/mine-order.png") center no-repeat;
              background-size: 22px;
              width: 22px;
              line-height: 2;
              padding-right: 20px;
            }
            .el-icon-my-mine-order:before {
              content: "替";
              visibility: hidden;
            }
          }
          /*选项卡选中样式*/
          .el-tabs__item.is-active{
            font-size: 16px;
            .el-icon-my-mine-vip{
              background: url("../../assets/img/mine-vip-on.png") center no-repeat;
              background-size: 26px 24px;
            }
            .el-icon-my-mine-user{
              background: url("../../assets/img/mine-user-on.png") center no-repeat;
              background-size: 24px;
            }
            .el-icon-my-mine-mailbox{
              background: url("../../assets/img/mine-mailbox-on.png") center no-repeat;
              background-size: 26px;
            }
            .el-icon-my-mine-account{
              background: url("../../assets/img/mine-anquan-on.png") center no-repeat;
              background-size: 22px;
            }
            .el-icon-my-mine-order{
              background: url("../../assets/img/mine-order-on.png") center no-repeat;
              background-size: 22px;
            }
          }
        }
      }
      // 右侧内容
      /deep/ .el-tabs__content{
        padding-left: 260px;
        margin-right: 15px;
        .active-content{
          background: #FFFFFF;
          margin-top: 60px;
          padding-left: 10px;
        }
      }
    }
  }
}

</style>
